<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>密友列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css" rel="stylesheet" type="text/css">
<link href="{$Think.config.RESOURCEURL}wx_assets/quan/mifriend.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js"></script>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js"></script>
<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
</head>
<body>
<div class="main">
    <div class="mask" id="mask"></div>
    <div class="friendlist">
        <dl class="titlelist">
            <dd>
                <ul id="order">
                    <li class="act"><div class="split">已激活(<label>{$count1}</label>)<div></li>
                    <li><div class="split">已淘汰(<label>{$count2}</label>)<div></li>
                    <li><div class="split">未审核(<label>{$count3}</label>)<div></li>
                </ul>
            </dd>
        </dl>
        <div>
            <div class="flist"  id="friendBox_0"></div>
            <div class="flist"  id="friendBox_1"></div>
            <div class="flist"  id="friendBox_2"></div>
        </div>
    </div>
</div>
<script type="text/html" id="tpl">
    <%if(list && list.length>0) {
        for(var i=0;i<list.length;i++){
            var item=list[i];
            item.miCoins=item.miCoins || 0;
            item.RESOURCEURL="{$Think.config.RESOURCEURL}";
        %>
        <div class="twou">
            <dl class="user-list" onclick="friendList.audit(this,'<%=item.id%>')">
                <dd>
                    <a href='{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&userName={$userName}&module=quan&method=index&params=%7B"qId"%3A"<%=qId%>"%7D'>
                    <%if(item.headImgUrl) {%>
                        <img src="<%=item.headImgUrl%>" alt="" />
                    <%} else {%>
                        <img src="<%=item.RESOURCEURL%>wx_assets/images/defaultHeadImg.png">
                    <%}%>
                    </a>
                </dd>
                <dt>
                    <span class="names">
                         <%=item.nickName%>
                        &nbsp;&nbsp;&nbsp;
                        <!--经验值&nbsp;:&nbsp;&nbsp;10-->
                        
                    </span>
                    <span class="shour">
                        收入&nbsp;:&nbsp;<%=item.miCoins%>
                    </span>
                    <%if(activeIndex==0) {%>
                        <span class="btn q3" onclick="friendList.stop(this,'<%=item.id%>')">淘汰</span>
                    <%}%>
                    <%if(activeIndex==1) {%>
                        <span class="btn q4" onclick="friendList.start(this,'<%=item.id%>')">激活</span>
                    <%}%>
                    <%if(activeIndex==2) {%>
                    <span class="btn q4" onclick="friendList.auditSave(this,'<%=item.id%>',1)">审核</span>
                    <%}%>
                </dt>
            </dl>
            <div class="user-detail" id="auditBox<%=item.id%>">
                <dl>
                    <dt>姓名：</dt>
                    <dd><%=item.fullName%>&nbsp;</dd>
                </dl>
                <dl>
                    <dt>手机号：</dt>
                    <dd><%=item.phone%>&nbsp;</dd>
                </dl>
            </div>
        </div>
        <%}%>
    <%} else {%>
        <div class="norecord">
           <%if(!activeIndex) {%>您目前还没有密友<%}%>
           <%if(activeIndex) {%>暂无记录<%}%>
        </div>
    <%}%>
</script>
<script type="text/javascript">
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var friendList={
        pageSize:10,
        activeIndex:0,
        tabs:null,
        init:function(){
            var me=this;
            var activeIndex= 0;
            this.tabs=$("#order li");
            this._initEvent();
            this.tabs.eq(activeIndex).trigger("click");
            this.activeIndex=activeIndex;
        },
        stop:function(obj,id){
            var me=this;
            window.event.cancelBubble = true;
            if(!$(obj).hasClass("disabled")) {
                $.util.pageLoading.show();
                $.util.ok("确定淘汰该密友吗？",function(){
                    $.req.get("call.json?module=quan&customerId={$customerId}&method=changeQuanUserDeleted",{
                    userName:"{$userName}",
                        params:{
                            "id":id,
                            "qId":'{$qId}',
                            "deleted":"1"
                        }
                    },function(data){
                        $.util.pageLoading.hide();
                        if(!data.code) {
                            me._refreshList(0);
                            me._refreshOther();
                        } else {
                            $.util.alert(data.msg);
                        }
                    });
                },function(){
                    $.util.pageLoading.hide();
                });
            }
        },
        auditSave:function(obj,id,status){
            var me=this;
            window.event.cancelBubble = true;
            if($(obj).hasClass("disabled")) {
               return;
            }
            $.util.ok("确定该密友审核通过吗？",function(){
                $.util.pageLoading.show();
                $.req.get("call.json?module=quan&customerId={$customerId}&method=auditQuanUser",{
                    userName:"{$userName}",
                    params:{
                        "id":id,
                        "qId":'{$qId}',
                        "status":status
                    }
                },function(data){
                    $.util.pageLoading.hide();
                    if(!data.code) {
                        me._refreshList(2);
                        me._refreshOther();
                    } else {
                        $.util.alert(data.msg);
                    }
                });
            },function(){
                $.util.pageLoading.hide();
            })
        },
        start:function(obj,id){
            var me=this;
            window.event.cancelBubble = true;
            if(!$(obj).hasClass("disabled")) {
                $.util.pageLoading.show();
                $.req.get("call.json?module=quan&customerId={$customerId}&method=changeQuanUserDeleted",{
                    userName:"{$userName}",
                        params:{
                            "id":id,
                            "qId":'{$qId}',
                            "deleted":"0"
                        }
                    },function(data){
                        $.util.pageLoading.hide();
                        if(!data.code) {
                            me._refreshList(1);
                            me._refreshOther();
                        } else {
                            $.util.alert(data.msg);
                        }
                });
            }
        },
        audit:function(obj,id){
            var me=this;
            if(!$(obj).hasClass("disabled")) {
                $(obj).siblings("#auditBox"+id).toggle();
            }
        },
        toggleOp:function(id){
            var ybt=$("#ybt"+id);
            var op=$("#OpList"+id);
            if(ybt.hasClass("open")){
                ybt.removeClass("open");
                op.hide();
            } else {
                ybt.addClass("open");
                op.show();
            }
        },
        _initValidate:function(){
            var me = this;
            var config = {};
            $("#addBtn").tap(function(){
                $(".mes_error").hide();
                $("#addBox,#mask").show();
                $("#fullName,#mobile").val("");
            });
            config = {
                "fullName": {
                    rule: {
                        required: {
                            message: "请输入姓名！"
                        }
                    },
                    pos: "bottom"
                },
                "mobile": {
                    rule: {
                        required: {
                            message: "请输入手机号！"
                        },
                        mobile: {
                            message: "请输入11位手机号！"
                        }
                    },
                    pos: "bottom"
                }
            }
            var va = new Validate("addBox", config);
            $("#btnOk").click(function() {
                va.validate(function(result) {
                    if (result) {
                        me._saveSubmit();
                    }
                });
            });
            $("#btnCancel").click(function(){
                $("#addBox,#mask").hide();
            });
        },
        _initEvent:function(){
            var me=this;
            var state="loaded";
            this.tabs.click(function(){
                var index = me.tabs.index($(this));
                var page=$(this).attr("page") || 0;
                me.activeIndex=index;//记录当前激活的
                $(this).addClass("act").siblings().removeClass("act");
                $("#friendBox_"+index).show().siblings().hide();
                $.util.dataEnd.hide();
                if(!$(this).attr("loaded")){
                    $.util.pageLoading.show();
                    $("#friendBox_"+index).html("");
                    me._loadList(page,function(){
                        $.util.pageLoading.hide();
                    });
                    $(this).attr("loaded","1");
                }
            });
            $.util.initDataLoading({
                me:friendList,
                lastChildren:function(){
                    return $("#friendBox_"+friendList.activeIndex+" .twou:last");
                },
                page:function(){
                    return friendList.tabs.eq(friendList.activeIndex).attr("data-page") || 0; 
                },
                pageCount:function(){
                    return friendList.tabs.eq(friendList.activeIndex).attr("data-pageCount");
                }
            });
        },
        _refreshList:function(index,callback){
            var me=this;
            activeIndex=me.activeIndex;
            me.activeIndex=index;
            $("#friendBox_"+me.activeIndex).html("");
            me._loadList(0,function(){
                me.activeIndex=activeIndex;
                callback && callback();
            });
        },
        _refreshOther:function(){
            var me=this;
            $.each(me.tabs,function(i,n){
                if(i!=me.activeIndex) {
                    $(n).removeAttr("loaded");
                }
            });
            me._refreshCount();
        },
        _refreshCount:function(){
            var me=this;
            $.req.get("call.json?module=quan&customerId={$customerId}&method=miPage",{
                userName:"{$userName}",
                params:{
                    "qId":"{$qId}"
                }
            },function(data){
                if(data){
                    $("#order > li").each(function(i){
                        $(this).find("label").text(data["count"+(i+1)]);
                    });
                }
            });
        },
        _renderList:function(data,page,callback){
           var me=this;
           if(data){
                var html=template("tpl", data),
                    container=$("#friendBox_"+me.activeIndex);
                container.append(html);
                this.tabs.eq(me.activeIndex).attr("data-pageCount",data.pageCount);
                this.tabs.eq(me.activeIndex).attr("data-page",page);
                $("#mask").height($.util.page.getHeight());
                callback && callback();
           }   
        },
        _loadList:function(page,callback){
            var me=this;
            $.req.get("call.json?module=quan&customerId={$customerId}&method=getMiFList",{
                userName:"{$userName}",
                params:{
                    "qId":"{$qId}",
                    "status":me.activeIndex || 0,
                    "start":page,
                    "limit":me.pageSize
                }
            },function(data){
                if(data){
                    data.activeIndex=me.activeIndex;
                    me._renderList(data,page,callback);
                }
            });
        }
    }
    friendList.init();
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": {$pkg.timestamp},
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</body>
</html>